<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">订单详情</span>
    </div>
    <div class="jx-detail">
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            基本信息
          </div>
          <div class="list">
            <span>订单来源：</span>
            <div class="right">
              <span>{{detail.shopOrderSource || '--'}}<i class="tip">{{detail.sum || '--'}}次剩余</i></span>
            </div> 
          </div>
          <div class="list">
            <span>下单时间：</span>
            <div class="right">
              <span>{{detail.shopOrderAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>支付时间：</span>
            <div class="right">
              <span>{{detail.shopOrderPayAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>所属店铺：</span>
            <div class="right">
              <span>{{detail.shopProductName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>订单类型：</span>
            <div class="right">
              <span>{{detail.orderCatalog || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>订单状态：</span>
            <div class="right">
              <span>{{detail.shopOrderStatus || '--'}}</span>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">服务单信息</div>
          <div class="list">
            <span>服务单总次数：</span>
            <div class="right">
              <span>{{detail.serviceProductCount || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>已使用次数：</span>
            <div class="right">
              <span>{{detail.serviceProductUseCount || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>开始时间：</span>
            <div class="right">
              <span>{{detail.serviceBeginAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>结束时间：</span>
            <div class="right">
              <span>{{detail.serviceEndAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>结算方：</span>
            <div class="right">
              <span>{{detail.balanceUnitName || '--'}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            客户信息
          </div>
          <div class="list">
            <span>客户昵称：</span>
            <div class="right">
              <span>{{detail.consumerNickname || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>注册手机号：</span>
            <div class="right">
              <span>{{detail.consigneePhone || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>收货信息：</span>
            <div class="right">
              <span>{{detail.consigneeName || '--'}}，{{detail.consigneePhone || '--'}}，{{detail.consigneeAddress || '--'}}</span>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">发货信息</div>
          <div class="list">
            <span>快递名称：</span>
            <div class="right">
              <span>{{detail.expressName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>快递单号：</span>
            <div class="right">
              <span>{{detail.expressNo || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>发货时间：</span>
            <div class="right">
              <span>{{detail.deliveryAt || '--'}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">
            车辆信息
          </div>
          <div class="jx-table" style="padding: 0;">
            <el-table :data="detail.productTotal.products" border show-summary :summary-method="getSum" style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="shopProductName" label="产品名称" width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopProductImgUrl" label="产品图片" width="130" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <img class="logo" :src="scope.row.shopProductImgUrl"/>
                </template>
              </el-table-column>
              <el-table-column prop="shopProductSpec" label="产品规格" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopOrderAmount" label="数量" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopOrderPrice" label="单价" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopOrderSum" label="金额" align="center" :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: this.$api.order.order.detail,
        boo: {
          loading: false,
        },
        other: {
          shopOrderAmount: '0',
          shopOrderSum: '0',
        },
        detail: '',
			}
		},
		mounted(){
      let _self = this
      _self.getDetail()
    },
		methods: {
      back(){
        history.go(-1)
      },
      getDetail(){
        let _self = this
        let params = {
          id: this.$route.query.id,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.detail = res.retObject
            _self.other.shopOrderAmount = res.retObject.productTotal.shopOrderTotalAmount
            _self.other.shopOrderSum = res.retObject.productTotal.shopOrderTotalSum
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(`${_self.https}${_self.$route.query.id}`, {}, success) 
      },
      getSum(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          switch(column.property) {
            case "shopOrderAmount":
              sums[index] = this.other.shopOrderAmount
              break;
            case "shopOrderSum":
              sums[index] = this.other.shopOrderSum
              break;
            default:
              break;
          }
        });
        return sums;
      },
    },
	}

</script>
<style scoped lang="sass">
  .jx-detail .detail-item .right
    .tip
      font-style: normal
      color: #0099ff
      background: #e3f4ff
      padding: 1px 5px
      font-size: 12px
      margin-left: 10px
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
</style>
